<template>
  <div class="dialog">
    <div class="dialog-con comfirmStock">
      <div class="com">商品入库详情</div>
      <div class="confirmshop">
        <div class="table">
          <el-table
            :data="stockInfo.items"
            height="200"
            @selection-change="handleSelectionChange"
            border
            highlight-current-row
            style="width: 100%"
            ref="table">
            <el-table-column
              prop="itemCode"
              :show-overflow-tooltip="true"
              label="商品编码"
              width="80">
            </el-table-column>
            <el-table-column
              prop="itemSkuName"
              :show-overflow-tooltip="true"
              label="商品名称">
            </el-table-column>
            <el-table-column
              prop="returnNum"
              :show-overflow-tooltip="true"
              label="退货数量"
              width="80">
            </el-table-column>
            <el-table-column
              prop="alreadyInNum"
              :show-overflow-tooltip="true"
              label="已入库数量"
              width="95">
            </el-table-column>
            <el-table-column
              prop="brokenNum"
              width="80"
              label="破损数量">
            </el-table-column>
            <el-table-column
              prop="inNum"
              width="80"
              label="入库数量">
            </el-table-column>
            <el-table-column
              width="150"
              prop="depotName"
              :show-overflow-tooltip="true"
              label="入库仓库">
            </el-table-column>
            <el-table-column
              width="80"
              prop="status"
              label="入库状态">
              <template slot-scope="scope">
                <p>{{scope.row.status | status}}</p>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button @click="confirmStock(scope.row)" type="text" size="small"
                           v-if="scope.row.status== '3' || scope.row.status== '0' ">确认入库
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <p style="color:#606266;line-height: 35px;font-size: 14px;font-weight:700"><i class="iconfont"
                                                                                      style="color:#4ae2ef;height:30px;width:20px;display: inline-block">&#xe607;</i>入库详情
        </p>
        <div class="table">
          <el-table
            :data="arr"
            height="200"
            border
            highlight-current-row
            style="width: 100%"
            ref="table">
            <el-table-column
              prop="itemSkuName"
              :show-overflow-tooltip="true"
              label="商品名称">
            </el-table-column>
            <el-table-column
              prop="inNum"
              :show-overflow-tooltip="true"
              label="已入库数量"
              width="95">
            </el-table-column>
            <el-table-column
              prop="brokenNum"
              width="100"
              label="破损数量">
            </el-table-column>
            <el-table-column
              prop="depotCode"
              :show-overflow-tooltip="true"
              label="仓库名称"
              width="80">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="80">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="deleteRow(scope.$index, arr)"
                  type="text"
                  size="small">
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="stockCon">
          <el-button @click="conStock()" :disabled="disabledConfirm" size="medium" type="primary">确认入库</el-button>
          <el-button @click="cancelStock" size="medium">取消</el-button>
        </div>
        <!--  //弹框-->
        <in-stock v-if="showCon" @close="close" :itemData="itemData"></in-stock>
      </div>
    </div>
  </div>
</template>

<script>
  import {localStorage} from 'js/localStorage'
  import inStock from '../ConfirmStock/inStock'

  export default {
    inject: ['reload'],
    components: {
      inStock
    },
    data() {
      return {
        disabledInput: true,
        userId: '',
        stockIn: [],
        disabledConfirm: false,
        showCon: false,
        depotCode: '',
        itemsArr: [],
        selection: [],
        arr: [],
        itemData: {},
      }
    },
    props: {
      stockInfo: {
        type: Object,
        default: {}
      }
    },
    filters: {
      status(type) {
        switch (type) {
          case "0" :
            return "未入库";
            break;
          case "1" :
            return "已入库";
            break;
          case "2" :
            return "取消入库";
            break;
          case "3" :
            return "部分入库";
            break;
        }
      }
    },
    created() {
      this.userId = localStorage.get('userID')
      this.getWareHouse()
    },
    methods: {
      //获取仓库
      getWareHouse() {
        let success = data => {
          if (data.code == "OK") {
            this.stockIn = data.data;
          } else {
            this.$message.error(data.msg)
          }
        }
        this.api.erpComplainDepotListAll({}, success)
      },
      deleteRow(index, rows) {
        this.$confirm('确定要移除吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          rows.splice(index, 1);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消操作'
          });
        });

      },
      confirmStock(row) {
        this.itemData = row
        this.showCon = true
      },
      close(data) {
        this.showCon = false
        let b = this.arr.find(item=>item.itemId === data.itemId);
        if (b) {
          this.$message.warning({
            message: '商品已经存在，请不要重复添加',
          });
          return;
        }

        this.arr.push(data)
      },
      cancelStock() {
        this.$emit('closeDialog')
      },
      handleSelectionChange(selection) {
        this.selection = selection
        this.itemsArr = []
        for (var value of this.stockInfo.items) {
          value["flag"] = 0
          selection.forEach(element => {
            if (element.itemId == value.itemId) {
              element.flag = 1
            }
          });
        }
        for (var value of selection) {
          if (value.flag == 1) {
            this.itemsArr.push(value)
            this.getWareHouse()
          }
        }
      },

      conStock() {
        for (let val of this.arr) {
          for (let ele of this.stockIn)
            if (val.depotCode == ele.depotName) {
              val.depotCode = ele.id
            }
        }
        let parmas = {
          complainId: this.stockInfo.complainId,
          userId: this.userId,
          items: this.arr
        }
        let success = data => {
          if (data.code == "OK") {
            this.$message.success("入库成功")
            this.$emit('closeDialog')
          } else {
            this.$message.error(data.msg)
          }
        }
        this.api.complainApplyStockIn(parmas, success)
      },

    }
  }
</script>
<style lang="scss" scoped>
  .comfirmStock {
    width: 880px;
    height: 550px;

    .com {
      line-height: 40px;
      background: #eee;
      text-align: center;
      margin-bottom: 10px;
    }

    .confirmshop {
      padding: 0 10px;
    }

    .stockCon {
      width: 100%;
      text-align: center;
      padding: 10px 0;
    }
  }
</style>



